<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <style>
        /* 隐藏滚动条但可以滚动 */
        body {
            overflow: hidden;
        }
        .container-fluid {
            overflow-y: scroll;
            height: 100vh; /* 高度设置为全屏 */
        }
    </style>
    <script>
        $(document).ready(function() {
            loadOrders(); // 页面加载时加载所有订单
        });

        function loadOrders() {
            $.ajax({
                type: 'GET',
                url: '${pageContext.request.contextPath}/orders?operation=findAll',
                dataType: 'json',
                success: function(response) {
                    $('#orderTableBody').empty();

                    $.each(response.data, function(index, order) {
                        $('#orderTableBody').append(
                            '<tr>' +
                            '<td>' + order.orderId + '</td>' +
                            '<td>' + order.userId + '</td>' +
                            '<td>' + order.bookId + '</td>' +
                            '<td>' + order.bookName + '</td>' +
                            '<td>' + order.quantity + '</td>' +
                            '<td>' + order.orderDate + '</td>' +
                            '</tr>'
                        );
                    });
                },
                error: function(xhr, status, error) {
                    console.error('加载订单数据出错:', error);
                }
            });
        }

    </script>
</head>
<body>
<div class="container-fluid mt-4">

    <!-- 订单表格 -->
    <table id="orderTable" class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>购买人</th>
            <th>书籍ID</th>
            <th>书籍名称</th>
            <th>数量</th>
            <th>购买时间</th>
        </tr>
        </thead>
        <tbody id="orderTableBody">
        <!-- 订单数据将会动态填充在这里 -->
        </tbody>
    </table>

</div>

</body>
</html>
